<template>
	<view>
		<view class="cars">
			<view class="item" v-for="(item,index) in carList" :key="index">
				<view class="itemLeft"><image :src="item.mer_avatar"></image></view>
				<view class="itemRight">
					<view class="">{{ item.mer_name }}</view>
					<view class="">{{ item.mer_address }}</view>
				</view>
			</view>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			carId:'',
			carList:[],
			loadStatus: 'more',
			page:1,
			pageSize:10
		};
	},
	onLoad(e) {
		this.carId = e.id
		if(this.carId == 21) {
			uni.setNavigationBarTitle({
				title: '生活服务'
			});
		}
		this.getCarList()
	},
	methods:{
		// 获取数据
		getCarList() {
			let that = this
			that.loadStatus = 'loading';
			that.$api.getCarList(that.carId,{
				page: that.page,
				limit:that.pageSize
			},res => {
				if(res.status == 200) {
					that.carList = [...that.carList, ...res.data.list];
					if (res.data.length >= 10) {
						that.loadStatus = 'more';
						that.page++;
					} else {
						// 数据已加载完毕
						that.loadStatus = 'noMore';
					}
				}else {
					that.loadStatus = 'noMore';
				}
			})
		},
	},
	onReachBottom() {
		if (this.loadStatus === 'more') {
			this.getCarList();
		}
	}
}
</script>

<style lang="less">
page {
	background-color: #FFFFFF;
}
.cars {
	padding: 20rpx 20rpx 0;
	.item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		border-top: 1rpx solid #ECECEC;
		padding-bottom: 20rpx;
		.itemLeft {
			width: 180rpx;
			height: 180rpx;
			margin-right: 30rpx;
			border-radius: 10rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		.itemRight {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			flex: 1;
			height: 180rpx;
		}
	}
	.item:first-child {
		border-top: none;
	}
}
</style>
